<div class="manus-step-renderer">
    <div class="manus-step-header" *ngIf="message.initData?.title">
        <div class="header-content">
            <h3>{{message.initData.title}}</h3>
            <div class="progress-status" *ngIf="message.initData?.progress">
                <span class="progress-text">完成:
                    {{message.initData.progress.completed + message.initData.progress.blocked}}/{{message.initData.progress.total}}</span>
            </div>
        </div>
        <div class="progress-bar">
            <j-progress width="100%" [value]="getProgressPercentage()" [status]="getProgressStatus()"
                preSize="default"></j-progress>
        </div>
    </div>

    <div class="step-cards" *ngIf="steps?.length > 0">
        <div class="step-card" *ngFor="let step of steps; let i = index" [class.active]="step.isActive">
            <div class="step-header">
                <div class="step-header-top" (click)="toggleStep(i)">
                    <div class="step-left">
                        <span class="step-index">Step {{step.index}}</span>
                        <span class="step-dependencies" *ngIf="getDependenciesText(step)">
                            <i class="iconfont iconfont-e94a dependencies-icon"></i>
                            {{getDependenciesText(step)}}
                        </span>
                    </div>
                    <i class="expand-icon" [class.expanded]="step.isActive"></i>
                </div>
                <div class="step-header-bottom">
                    <span class="step-name">{{step.name}}</span>
                    <div class="status-icon">
                        <i *ngIf="step.status === 'success'" class="success iconfont iconfont-e142" j-tooltip
                            [jigsawTooltip]="_$statusText(step)"></i>
                        <i *ngIf="step.status === 'failed'" class="failed iconfont iconfont-e1a5" j-tooltip
                            [jigsawTooltip]="_$statusText(step)"></i>
                        <i *ngIf="step.status === 'waiting'" class="waiting iconfont iconfont-e4bf" j-tooltip
                            [jigsawTooltip]="_$statusText(step)"></i>
                        <jigsaw-circle-loading *ngIf="step.status === 'processing'" [size]="'extra-small'" j-tooltip
                            [jigsawTooltip]="_$statusText(step)"></jigsaw-circle-loading>
                    </div>
                </div>
            </div>
            <div class="step-content" *ngIf="step.isActive">
                <div class="step-notes" *ngIf="step.notes" typing-html [typingHtml]="step.notes" [message]="message">
                </div>
                <div class="step-details" *ngIf="step.details">
                    <div class="details-title">详细信息</div>
                    <div class="details-content">{{step.details}}</div>
                </div>
            </div>
        </div>
    </div>

    <div class="manus-step-footer" *ngIf="message.initData?.result">
        <div class="result-title">
            <i class="iconfont iconfont-e6f6"></i>
            <span>结果</span>
        </div>
        <div class="manus-step-result" typing-html [typingHtml]="message.initData?.result" [message]="message"></div>
    </div>
</div>
